<template>
  <div class="client-append-form">
    <!-- label 和 input 5/12 均分位置 -->
    <a-form :form="form" @submit="handleSubmit" autoComplete="off">
      <a-form-item label="客户名称">
        <a-input
          v-decorator="['name',
            { rules: [
              { required: true, message: '客户名称必须输入' },
              { min: 4, message: '请输入至少4个字符'},
              { max: 20, message: '最多只能输入20个字母'}
            ]}
          ]"
          placeholder="客户名称，4到20个字符"
        />
      </a-form-item>
      <a-form-item label="客户字母缩写">
        <a-input
          v-decorator="['clientAbbr',
            { rules: [
              { required: true, message: '客户字母缩写必须输入，用于生成ID' },
              { len: 2, message: '请输入两个字母' },
              { pattern: '[a-zA-Z]{2}', message: '只能输入字母'}
            ]}
          ]"
          placeholder="请输入两个英文字母，用于生成ID"
        />
      </a-form-item>
      <a-form-item label="地址">
        <a-input
          v-decorator="['address', {initialValue: ''}]" placeholder="客户地址"
        />
      </a-form-item>
      <a-form-item label="联系方式">
        <a-input
          v-decorator="['phone',
           {initialValue: ''},
          ]"
          placeholder="客户联系方式"
        />
      </a-form-item>
      <a-form-item>
        <div class="operations">
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
          <a-button @click="handleCancel">
            取消
          </a-button>
        </div>

      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import {
  clientAppendReq
} from "@/requests/clientRequests";

export default {
  name: "ClientAppendForm",
  props: {

  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'clientAppend' }),
    };
  },
  computed: {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // 将缩写转成大写
          values.clientAbbr = values.clientAbbr.toUpperCase();

          const loaded = this.$message.loading('正在添加客户，请勿重复点击确认', 0);
          // 这里填写向后端请求 添加客户 的代码
          clientAppendReq(values).then((res) => {
            loaded();
            // 获取返回的id
            const clientId = res.data.id;
            // 跳转首页
            this.$router.push({
              name: 'ClientIndex',
            });
            // 弹出添加成功的提示框
            this.$notification['success']({
              message: '添加客户',
              description:
                `添加客户成功，客户ID ${clientId}`,
            });
            this.$store.commit('updateClientsCache');
          }).catch((err) => {
            loaded();
            this.$notification['error']({
              message: '添加客户',
              description:
                `添加客户失败，失败信息 ${err.response.data.message}`,
            });
          });
        }
      });
    },
    handleCancel() {
      this.form = this.$form.createForm(this, { name: 'clientAppend' });
      this.$message.info('撤销新增用户');
      this.$router.push({
        name: 'ClientIndex'
      });
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.client-append-form {
  .ant-form {

    display: flex;
    flex-direction: column;
    padding: 0 100px;
    .ant-form-item:not(:last-child) {
      display: grid;
      grid-template-columns: 0 120px 500px 0;
    }

    .ant-form-item:last-child {
      display: grid;
      grid-template-columns: 470px 150px 0;
      .operations {
        display: flex;
        justify-content: space-between;
      }
    }
  }


  

}
</style>
